<!--
 * @Author: HuangBingQuan <17671241237@163.com>
 * @Date: 2025-01-16 10:28:18
 * @LastEditTime: 2025-01-18 18:38:36
 * @FilePath: /low-code-platform/src/views/MaterialsView/components/Layout.vue
-->
<template>
    <div class="layout-container flex">
        <!-- 选择具体的业务组件 -->
        <div class="left flex wrap space-between">
            <slot />
        </div>
        <!-- 显示对应的业务组件 -->
        <div class="center">
            <router-view v-slot="{ Component }">
                <component
                    :status="store.coms[store.currentMaterialCom].status"
                    :serialNum="1"
                    :is="Component"
                ></component>
            </router-view>
        </div>
        <!-- 编辑面板 -->
        <div class="right">
            <EditPannelComp :com="currentCom"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, provide } from 'vue';
import { useMaterialStore } from '@/stores/useMaterial.ts';
import EditPannelComp from '@/components/SurveyComs/EditItems/EditPannel.vue';

const store = useMaterialStore();
const currentCom = computed(()=> {
    return store.coms[store.currentMaterialCom];
});

const updateStatus = (configKey: string, payload?: number | string | boolean | object) => {
    const target = currentCom.value.status[configKey];
    if (['title', 'desc'].includes(configKey)) {
        if(typeof payload !== 'string') {
            console.error('Invalid payload type for title or desc. Expected string！');
        }else {
            store.setTextStatus(target, payload);
        }
    }else if(['options'].includes(configKey)) {
        store.addOption(target);
    }
    console.log(configKey, payload);
}
provide('updateStatus', updateStatus);

onMounted(()=> {
    console.log("----------->", currentCom);
})

// const currentcom from
// console.log(
//     'store',
//     currentCom,
//     store.coms,
//     store.currentMaterialCom,
//     store.coms[store.currentMaterialCom],
// );
</script>

<style lang="scss" scoped>
.layout-container {
    width: 100%;
    // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
    height: calc(100vh - 100px - 40px - 20px);
    align-items: flex-start;
    border: 1px solid var(--border-color);
    border-top-right-radius: var(--border-radius-lg);
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}
.left {
    width: 180px;
    text-align: center;
    align-items: flex-start;
    padding: 20px;
}
.center {
    width: 550px;
    // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
    height: calc(100vh - 100px - 40px - 60px - 20px);
    overflow-y: scroll;
    padding: 30px;
    border-left: 1px solid var(--border-color);
}
.right {
    width: 350px;
    height: calc(100vh - 100px - 40px - 20px);
    overflow-y: scroll;
    border-left: 1px solid var(--border-color);
}
</style>
